<template>
  <div>
    <div class="search flex align-center justify-end">
      <el-button type="primary" @click="handleContral({}, 'add')"
        >新增</el-button
      >
    </div>
    <el-table
      v-loading="loading"
      :data="data"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        v-for="(item, index) in list"
        :key="index"
        :label="item.label"
        :width="item.width"
      >
        <template slot-scope="scope">
          <img
            v-if="scope.row[item.prop] && item.type == 'img'"
            class="avatar"
            :src="scope.row[item.prop]"
            :preview-src-list="[scope.row[item.prop]]"
          />
          <el-tag v-else-if="item.dicData && item.dicData.length>0" type="success"><span >{{ scope.row[item.prop] | dicStatus(item.dicData) }}</span></el-tag>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" :width="option.contralWidth">
        <template slot-scope="scope">
          <el-button
            type="info"
            size=""
            @click="handleContral(scope.row, 'info')"
            >查看</el-button
          >
          <el-button
            type="success"
            size=""
            @click="handleContral(scope.row, 'edit')"
            >修改</el-button
          >
          <el-button
            type="danger"
            size=""
            @click="handleContral(scope.row, 'delete')"
            >删除</el-button
          >
          <slot name="menu" :item="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="page.total > 0"
      :total="page.total"
      :page="page.page"
      :limit="page.limit"
      @pagination="pagination"
    />
    <Dialog :show.sync="show" :full="false" @open="open" @close="close">
      <div class="info" v-if="show">
        <vaeForm
          :formConfig="option"
          :value="value"
          @input="handleInput"
          :type="type"
          @close="dialogClose"
          @row-save="rowSave"
          @row-edit="rowEdit"
        ></vaeForm>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Dialog from "@/components/Dialog";
import vaeForm from "@/components/vae-form";
import pagination from "@/components/Pagination";
export default {
  name: "vae-table",
  components: { Dialog, vaeForm, pagination },
  props: {
    value: {
      type: Object,
      default() {
        return {};
      },
    },
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    option: {
      type: Object,
      default() {
        return {};
      },
    },
    page: {
      type: Object,
      default() {
        return {
          page: 1,
          pageSize: 10,
          total: 10,
        };
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      show: false,
      currentIndex: 0,
      currentLabel: "",
      type: "",
    };
  },
  created() {
    this.require();
    this.init();
  },
  watch: {
    form(news) {
      this.$emit("input", news);
    },
  },
  filters: {  
    dicStatus(key,data) {
      return data.filter(item=>item.key ==key)[0].value
    },
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  computed: {
    formData() {
      return { ...this.value };
    },
    list() {
      return this.option.column.filter((item) => !item.isTab);
    },
    listQuery: {
      set() {},
      get() {
        return this.page;
      },
    },
  },
  methods: {
    // 分页
    pagination(page) {
      this.$emit("pagination", page);
    },
    // 初始化
    require() {
      this.$emit("on-load");
    },
    // 默认设置
    init() {
      const formData = { ...this.value };
      this.form = this.value;
      this.$emit("input", formData);
    },
    // 表格 v-model
    handleInput(value) {
      this.$emit("input", value);
    },
    // 按钮操作
    handleContral(scope, type) {
      this.$emit("open", { row: scope, type });
      if (type == "delete") {
        this.$emit("row-delete", { row: scope, type });
        return;
      }
      if (type == "add") {
        this.$emit("input", {});
      }
      this.show = true;
      this.type = type;
    },
    //  新增
    rowSave() {
      this.$emit("row-save",this.dialogClose);
    },
    // 编辑
    rowEdit() {
      this.$emit("row-edit",this.dialogClose);
    },
    // 弹窗打开回调
    open() {
      // this.$emit("open", this.type);
    },
    // 弹窗关闭回调
    close() {
      // this.$emit("close", this.type);
    },
    dialogClose() {
      this.show = false
    }
  },
};
</script>

<style lang="scss" scoped>
.avatar {
  width: 40px;
  height: 40px;
  object-fit: cover;
}
.search {
  margin-bottom: 20px;
}
// .info {
//   /deep/ .el-form-item__label {
//     font-size: 16px;
//     color: #222222;
//     font-weight: normal;
//     margin-right: 10px;
//   }
//   &-item {
//     margin-bottom: 20px;
//   }
//   .value {
//     font-size: 16px;
//     color: #666666;
//   }
// }
</style>